<template>
    <div class="ui-spinner-range">
        <div class="ui-spinner-range__start">
            <ui-spinner v-model="innerStart" :width="startWidth" :min="startMin" :max="startMax" :placeholder="startPlaceholder" :disabled="startDisabled"></ui-spinner>
        </div>
        <div class="ui-spinner-range__line">~</div>
        <div class="ui-spinner-range__end">
            <ui-spinner v-model="innerEnd" :width="endWidth" :min="endMin" :max="endMax" :placeholder="endPlaceholder" :disabled="endDisabled"></ui-spinner>
        </div>
        <div class="ui-spinner-range__unit" v-if="unit">{{ unit }}</div>
    </div>
</template>
<script>
export default {
    name: 'UiSpinnerRange',
    props: {
        value: {
            type: Array
        },
        unit: {
            type: String
        },
        startWidth: {
            type: String,
            width: '100%'
        },
        startDisabled: {
            type: Boolean,
            default: false
        },
        startPlaceholder: {
            type: String
        },
        endWidth: {
            type: String,
            width: '100%'
        },
        endDisabled: {
            type: Boolean,
            default: false
        },
        endPlaceholder: {
            type: String
        },
        startMin: {
            type: Number
        },
        endMin: {
            type: Number
        },
        startMax: {
            type: Number
        },
        endMax: {
            type: Number
        }
    },
    computed: {
        innerValue: {
            get () {
                return this.value || []
            },
            set (val) {
                this.$emit('input', val)
            }
        },
        innerStart: {
            get () {
                return this.innerValue[0]
            },
            set (val) {
                const nextValue = [...this.innerValue]
                nextValue[0] = val
                this.innerValue = nextValue
            }
        },
        innerEnd: {
            get () {
                return this.innerValue[1]
            },
            set (val) {
                const nextValue = [...this.innerValue]
                nextValue[1] = val
                this.innerValue = nextValue
            }
        }
    }
}
</script>
<style lang="less">
.ui-spinner-range{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.ui-spinner-range__line{
    margin: 0 6px;
    color: #999;
}
.ui-spinner-range__unit{
    margin-left: 6px;
}
</style>